<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			img{
				width: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
			条件渲染：
					v-if:
						适用于：切换频率很低的场景
						特点：不展示的DOM节点直接被删除

					v-show:
						适用于：切换频率很高的场景
						特点：不展示的DOM节点没有被删除，仅仅是使用样式隐藏掉
					
					严重注意：使用v-if的时，DOM节点可能无法获取到，而使用v-show一定可以获取到DOM节点。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{isHot ? '炎热' : '凉爽'}}</h2>
			<button @click="isHot = !isHot">切换天气</button>

			<!-- 使用v-show做条件渲染 -->

			<!-- 只有天气炎热，才会展示下面的div -->
			<div v-show="isHot">
				<img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg" alt=""><br/>
				<span>建议：心境自然就会凉</span>
			</div>

			<!-- 只有天气凉爽，才会展示下面的div -->
			<div v-show="!isHot">
				<img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" alt=""><br/>
				<span>建议：妈妈告诉你要穿秋裤了</span>
			</div>

			<!-- ---------------------------------------------------------- -->
			<!-- 使用v-if、v-else-if、v-else做条件渲染 -->
			<!-- <div v-if="isHot">
				<img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg" alt=""><br/>
				<span>建议：心境自然就会凉</span>
			</div> -->

			<!-- <div v-else>
				<img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" alt=""><br/>
				<span>建议：妈妈告诉你要穿秋裤了</span>
			</div> -->

		</div>

		<script type="text/javascript" >
			const vm = new Vue({
				el:"#root",
				data:{
					isHot:false
				}
			})
		</script>
	</body>
</html>